<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- include meta, stylesheets, jquery and title -->
	<ui:include src="/WEB-INF/master/implement.xhtml" />

</h:head>

<h:body>

	<!-- select deal of the day -->
	<f:event listener="#{specialProductController.ProductHome}"
		type="preRenderView" />

	<!-- select 6 products sort by timestamp -->
	<f:event listener="#{productController.ProductsHomeNew}"
		type="preRenderView" />

	<ui:include src="/WEB-INF/master/header.xhtml" />

	<div class="container navigation">
		<ui:include src="/WEB-INF/master/navigation.xhtml" />

		<div class="col-md-10">


			<h1 style="text-align: center">Deal of the Day</h1>
			<div class="row-fluid">

				<h:form id="add">
				
					<!-- display deal of the day -->
					<ui:repeat var="i" value="#{specialProductContainer.products}">

						<div class="col-sm-3">
							<table class="table">
								<thead>
									<tr>
										<th style="text-align: center">##{i.id} - #{i.name}</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<center>
												<h:panelGrid rendered="#{i.visible == true}">
													<h:commandLink action="#{productController.ProductDetail(i.productId)}">
														<h:graphicImage rendered="#{i.shiny == false}" value="resources/img/normal/#{i.id}.png" width="150" height="150" />
														<h:graphicImage rendered="#{i.shiny == true}" value="resources/img/shiny/#{i.id}.png" width="150" height="150" />
													</h:commandLink>
												</h:panelGrid>
												<h:panelGrid rendered="#{i.visible == false}">
													<h:graphicImage rendered="#{i.shiny == false}" value="resources/img/normal/#{i.id}.png" width="150" height="150" />
													<h:graphicImage rendered="#{i.shiny == true}" value="resources/img/shiny/#{i.id}.png" width="150" height="150" />
												</h:panelGrid>
											</center>
										</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="col-sm-3">
							<table class="table table-borderless">
								<thead>
									<tr class="table-bordered">
										<th colspan="2">Allgemeine Infos</th>
									</tr>
								</thead>
								<tbody>
									<tr class="table-bordered">
										<td>Typ:</td>
										<td>#{i.type1} #{i.type2}</td>
									</tr>
									<tr class="table-bordered">
										<td>Level:</td>
										<td>#{i.level}</td>
									</tr>
									<tr class="table-bordered">
										<td>Wesen:</td>
										<td>#{i.nature}</td>
									</tr>
									<tr class="table-bordered">
										<td>Fähigkeit:</td>
										<td>#{i.ability}</td>
									</tr>
									<tr class="table-bordered">
										<td>Geschlecht:</td>
										<td>#{i.gender}</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="col-sm-3">
							<table class="table table-borderless">
								<thead>
									<tr class="table-bordered">
										<th colspan="2">Attacken</th>
									</tr>
								</thead>
								<tbody>
									<tr class="table-bordered">
										<td>#{i.attack1}</td>
										<td>#{i.attack2}</td>
									</tr>
									<tr class="table-bordered">
										<td>#{i.attack3}</td>
										<td>#{i.attack4}</td>
									</tr>
									<tr>
										<!-- have price lined up perfectly -->
										<td colspan="2" style="border: 0">&nbsp;</td>
									</tr>
									<tr>
										<!-- have price lined up perfectly -->
										<td colspan="2" style="border: 0">&nbsp;</td>
									</tr>
									<tr class="table-bordered">
										<td colspan="2" style="text-align: center">Preis: <s><h:outputText
													value="#{i.normalPrice}">
													<f:convertNumber pattern="#0.00" />
												</h:outputText>€</s> &nbsp;<h:outputText value="#{i.specialPrice}">
												<f:convertNumber pattern="#0.00" />
											</h:outputText>€
										</td>
									</tr>
								</tbody>
							</table>
						</div>

						<div class="col-sm-3">
							<table class="table table-borderless">
								<thead>
									<tr class="table-bordered">
										<th colspan="4">EV-Werte</th>
									</tr>
								</thead>
								<tbody>
									<tr class="table-bordered">
										<td>KP</td>
										<td>#{i.evHp}</td>
										<td>Sp.-Ang.</td>
										<td>#{i.evSpatk}</td>
									</tr>
									<tr class="table-bordered">
										<td>Angriff</td>
										<td>#{i.evAtk}</td>
										<td>Sp.-Ver.</td>
										<td>#{i.evSpdef}</td>
									</tr>
									<tr class="table-bordered">
										<td>Vert.</td>
										<td>#{i.evDef}</td>
										<td>Init.</td>
										<td>#{i.evInit}</td>
									</tr>
									<tr>
										<!-- have button lined up perfectly -->
										<td colspan="4" style="border: 0">&nbsp;</td>
									</tr>
									<tr class="table-bordered">
										<td colspan="4" style="text-align: center">
											<h:form rendered="#{i.visible == true}">
												<p:commandLink rendered="#{i.inBasket == false}" update=":add" oncomplete="$('#addProduct').modal('show'); return false;" action="#{orderController.addProductToOrder(i)}">
													In den Warenkorb
												</p:commandLink> 
												<h:panelGrid rendered="#{i.inBasket == true}">
													Artikel bereits im Warenkorb
												</h:panelGrid>
											</h:form>
											<h:form rendered="#{i.visible == false}">
												Leider bereits vergriffen
											</h:form>
										</td>
									</tr>
								</tbody>
							</table>
						</div>

					</ui:repeat>
				</h:form>

			</div>

			<!-- neccessary in order to let the horizontal line be low enough -->
			<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
			<br /> <br /> <br />
			<hr />

			<!-- show six newest products -->
			<h1 style="text-align: center">Neu im Angebot</h1>
			<div class="row-fluid">

				<ui:repeat var="i" value="#{productContainer.products}">
					<div class="col-md-4">
						<table class="table table-bordered" style="text-align: center;">
							<tbody>
								<tr>
									<td rowspan="4"
										style="border-right: 0; border-left: 1; border-top: 1; border-bottom: 1;">
										<h:form>
											<h:commandLink
												action="#{productController.ProductDetail(i.productId)}">
												<h:graphicImage rendered="#{i.shiny == false}"
													value="resources/img/normal/#{i.id}.png" width="100"
													height="100" />
												<h:graphicImage rendered="#{i.shiny == true}"
													value="resources/img/shiny/#{i.id}.png" width="100"
													height="100" />
											</h:commandLink>
										</h:form>
									</td>
								</tr>
								<tr class="span3">
									<td
										style="border-right: 1; border-left: 0; border-top: 1; border-bottom: 0;">##{i.id}
										- #{i.name}</td>
								</tr>
								<tr class="span3">
									<td
										style="border-right: 1; border-left: 0; border-top: 0; border-bottom: 0;">Typ:
										#{i.type1} #{i.type2}</td>
								</tr>
								<tr class="span3">
									<td
										style="border-right: 1; border-left: 0; border-top: 0; border-bottom: 1;">Level:
										#{i.level}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</ui:repeat>

			</div>


		</div>

	</div>

	<!-- modal message after adding a product to the basket -->
	<div class="modal fade" id="addProduct" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<form class="form-horizontal">
					<div class="modal-body">
						<h4>Artikel erfolgreich dem Warenkorb hinzugefügt</h4>
					</div>
				</form>
			</div>
		</div>
	</div>

</h:body>
</html>